<template>
  <div class="homeSwiper">
    <div class="right-info">
      <!-- <div class="fTitle">把你未来的事业放在第 一位，也热爱生活，热 爱自己</div> -->
      <div class="fTitle">
        <!-- 智能制造学院<br /> -->
        <span style="margin-left: 50px"
          >数字化成长空间</span
        >
      </div>
      <div class="xcxImg"><img src="@/assets/images/xcx.jpg" alt="" /></div>
      <div class="sTitle">
        网上学习是为了让你在高科技领域找到一 份高薪工作，一起快乐学习吧
      </div>
    </div>
    <div class="home-carouselBox">
      <el-carousel trigger="hover">
        <!-- 底部边框 -->
        <div class="carouselBorder" />
        <el-carousel-item v-for="item in stuList" :key="item">
          <div>
            <div class="studentPic">
              <img v-lazy="item" />
            </div>
            <!-- <div class="studentInfo">
              <div class="name">学生姓名{{ item }}</div>
              <div class="tpye">毕业生</div>
              <div class="occupation">当前职业</div>
            </div> -->
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { location } from "@/util/tool";

export default {
  data() {
    return {
      stuList: [],
      location: location(window),
      picList: [
        "/stutasks/1618904954112_1.jpg",
        "/stutasks/1618904954101_2.jpg",
        "/stutasks/1618904954138_3.jpg",
        "/stutasks/1618903429852_4.jpg",
        "/stutasks/1618904954162_5.png",
      ],
    };
  },
  methods: {
    setTime(time, data) {
      let timer = setTimeout(() => {
        let str = data.splice(0, 1)?.[0];
        this.stuList.push(str);
        clearTimeout(timer);
        if (data.length) this.setTime(time, data);
      }, time);
    },
  },
  mounted() {
    this.setTime(1750, this.picList);
  },
};
</script>

<style lang="stylus">
.homeSwiper {
  margin: 0 auto 28px;
  display: flex;
  width: 1070px;
  height: 300px;
  background-image: linear-gradient(
    180deg,
    rgba(0, 146, 243, 0.5),
    rgba(7, 61, 96, 0.1)
  );
  box-shadow: 6px 10px 6px 0px rgba(19, 18, 18, 0.16);
  border-radius: 8px;
  overflow: hidden;

  .right-info {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 590px;

    .fTitle {
      width: 400px;
      font-family: Segoe UI;
      font-size: 40px;
      color: #707070;
    }

    .xcxImg {
      width: 180px;
      height: 180px;

      img {
        width: 100%;
        height: 100%;
        mix-blend-mode: multiply;
      }
    }

    .sTitle {
      display: none
      width: 400px;
      margin-top: 30px;
      font-family: Segoe UI;
      font-size: 22px;
      color: #707070;
    }
  }

  .home-carouselBox {
    flex: 1;
    display: flex;
    flex-flow: column;

    .el-carousel {
      flex: 1;

      .el-carousel__container {
        position: relative;
        height: 100%;
        overflow: hidden;

        .el-carousel__arrow--left, .el-carousel__arrow--right {
          bottom: 11px;
          top: unset;
          width: 38px;
          height: 50px;
          background-color: rgba(157, 185, 203, 0.5);
          border-radius: 2px;
          border: solid 1px rgba(225, 224, 224, 0.5);
        }

        i::before {
          font-size: 36px;
        }

        .el-carousel__arrow--left {
          border-left: none;
          left: 1px;
        }

        .el-carousel__arrow--right {
          border-right: none;
          right: 1px;
        }

        .el-carousel__arrow--left:hover, .el-carousel__arrow--right:hover {
          background: rgba(245, 245, 245, 0.5);
        }

        .carouselBorder {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 120px;
          // border: solid 1px #707070;
          opacity: 0.5;
        }

        .el-carousel__item {
          .studentPic {
            // height: 480px;
            height: 300px;

            img {
              object-fit: cover;
              width: 100%;
              height: 100%;
            }
          }

          .studentInfo {
            position: absolute;
            bottom: 36px;
            left: 50%;
            right: 50%;
            transform: translate(-50%, 0);
            width: 100%;
            text-align: center;

            .name {
              font-family: Segoe UI;
              font-size: 18px;
              font-weight: bold;
              color: #707070;
            }

            .tpye {
              font-family: Segoe UI;
              font-size: 16px;
              color: #707070;
            }

            .occupation {
              font-family: Segoe UI;
              font-size: 16px;
              color: #707070;
            }
          }
        }
      }

      .el-carousel__indicators {
        margin-bottom: 10px;

        .el-carousel__indicator {
          padding: 0;
          margin-left: 15px;
          width: 16px;
          height: 16px;
          background-color: #ffffff;
          border-radius: 50%;

          .el-carousel__button {
            opacity: 0;
          }
        }

        .is-active {
          width: 40px;
          background-color: #fea91b;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>